<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        body {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
        }

        tr {
            text-align: center;
        }

        .upUserData {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            backdrop-filter: blur(6px);
            background-color: rgb(255, 255, 255, 0.6);
            display: none;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
        }

        input,
        select {
            border: 1px solid rgb(255, 255, 255);
            min-height: 40px;
            background: rgb(0, 0, 0, 0.1);
        }

        .edit {
            background-color: rgb(255 134 0);
            margin: 4px;
            padding: 4px 8px;
            color: rgb(250 250 250);
            border-radius: 8px;
            border: none;
        }

        .del {
            background-color: rgb(223, 0, 0);
            margin: 4px;
            padding: 4px 8px;
            color: rgb(250 250 250);
            border-radius: 8px;
            border: none;
        }
    </style>
</head>

<body>
    <h1>购物车数据</h1>
    <!--  <label for="id">药品编号：</label>
    <input type="text" id="id" name="id" required>
    <button type="submit" onclick="findData()">搜索</button> -->
    <table class="drugTable" border="1">
        <!-- 表头 -->
        <thead>
            <tr>
                <th>药品编号</th>
                <th>药品名</th>
                <th>价格</th>
                <th>药品详情</th>
                <th>药品详情</th>
            </tr>
        </thead>

        <!-- 表体 -->
        <tbody>

        </tbody>

    </table>



    <!-- 修改数据弹框
    <div class="updateMe">
        <h1>修改内容</h1>
        <table border="1">
            <tr>
                <th>药品编号</th>
                <th>药品名</th>
                <th>价格</th>
                <th>药品详情</th>

            </tr>
            <tr>
                <td class="mailbox"></td>
                <td><input class="drugname" type="text"></td>
                <td><input class="price" type="text"></td>
                <td><input class="drugdetail" type="text"></td>
                <td>
                    <button class="edit" onclick="editUser(this)">确认修改</button>
                    <button class="del" onclick="closePage()">退出</button>
                </td>
            </tr>
        </table>
    </div> -->


    <script>

        // 定义一个函数用于将数据渲染到页面
        function renderDataToPage(data) {
            // 这里使用data渲染页面，例如使用模板引擎或直接操作DOM
            // 假设你使用的是一个简单的ul列表来展示数据
            const list = document.getElementById('data-list');
            data.forEach(item => {
                const li = document.createElement('li');
                li.textContent = item.name; // 假设返回的数据项有一个'name'属性
                list.appendChild(li);
            });
        }






        // 获取元素
        const upUserData = document.querySelector(".upUserData");
        const inputId = document.querySelector("#id");
        const tableTbody = document.querySelector(".drugTable tbody");
        const shoptable = document.querySelector("shoptable");


        // 初始化
        (function init() {
            // renderUserData();
            ShopData();
        })()


        // 搜索
        const findData = () => {
            console.log(inputId.value)
            $.ajax({
                url: "http://localhost:8080/findme",
                method: 'POST',
                dataType: 'json',
                contentType: 'application/json',  // 设置Content-Type
                data: JSON.stringify({ id: inputId.value }),       // 转换为JSON字符串
                success: function (response) {
                    if (response.length == 0) return;
                    tableXR(response)
                },
                error: function (error) {

                }
            });
        }

        // // 渲染用户数据
        // function renderUserData() {
        //     $.ajax({
        //         url: "http://localhost:8080/me",
        //         method: 'get',
        //         dataType: 'json',
        //         contentType: 'application/json',  // 设置Content-Type
        //         data: {},       // 转换为JSON字符串
        //         success: function (response) {
        //             tableXR(response)
        //         },
        //         error: function (error) {

        //         }
        //     });
        // }

        //渲染购物车数据
        function ShopData() {
            $.ajax({
                url: "http://localhost:8080/selshop",
                method: 'get',
                dataType: 'json',
                contentType: 'application/json',  // 设置Content-Type
                data: {},       // 转换为JSON字符串
                success: function (response) {
                    tableXR(response)
                },
                error: function (error) {

                }
            });
        }

        // 渲染表格
        const tableXR = (dataList) => {
            tableTbody.textContent = "";
            const wdsp = document.createDocumentFragment();
            dataList.forEach(element => {
                // 创建元素节点
                let tr = document.createElement("tr")
                // 修改元素内容
                tr.innerHTML = `
                                <td>${element.id}</td>
                                <td>${element.drugname}</td>
                                <td>${element.price}</td>
                                 <td>${element.quantity}</td>
                                <td>
                                      <button class="edit" onclick="openPage(this)" value="${element.id}">编辑</button>
                                      <button class="del" onclick="delUser(this)" value="${element.id}">删除</button>
                                </td>
                                `
                // 插入元素节点
                wdsp.appendChild(tr)
            })
            tableTbody.appendChild(wdsp)
        }








        /*
        *  获取数据
        *  格式： get + 事件 例如： getDrugData()
        */

        // 获取全部药品数据
        const getDrugData = () => {
            let dataList = [];
            $.ajax({
                url: "http://localhost:8080/me",
                method: 'get',
                dataType: 'json',
                contentType: 'application/json',  // 设置Content-Type
                data: {},       // 转换为JSON字符串
                success: function (response) {
                    dataList.push(...response);
                },
                error: function (error) {

                }
            });
            return dataList
        }







        // 打开弹框
        function openPage(obj) {
            upUserData.style.display = "flex"
            document.querySelector(".mailbox").textContent = obj.parentNode.parentNode.querySelector(".mailboxe").innerText
        }

        // 退出弹框
        function closePage() {
            upUserData.style.display = "none"
        }

        // 修改用户信息
        function editUser(obj) {
            const name = document.querySelector(".drugname").value
            const telephoneNumber = document.querySelector(".price").value
            const password = document.querySelector(".drugdetail").value
            const select = document.querySelector("select").value
            const mailbox = document.querySelector(".mailbox").innerText

            if (!mailbox) return alert("请选择用户信息的编辑")

            // 表单数据
            const formData = {
                email: mailbox,
                name: name,
                phone: telephoneNumber,
                password: password,
                sex: select
            }
            console.log(formData)

            // 过滤掉属性值为空的属性
            const filteredUser = Object.fromEntries(
                Object.entries(formData).filter(([key, value]) => value !== "")
            );

            //   修改
            postData("http://localhost:8080/updateMe", formData, function (response) {
                // 处理成功响应
                console.log('成功:', response);

            }, function (error) {
                // 处理错误响应
                console.log('错误:', error);
            });


        }

        // 删除用户信息
        function delUser(obj) {
            let id = obj.getAttribute("value")
            let data = { "id": id }
            //   修改
            postData("http://localhost:8080/delMe", data, function (response) {
                // 处理成功响应
                console.log('成功:', response);

            }, function (error) {
                // 处理错误响应
                console.log('错误:', error);
            });
        }

        // 格式化字符串成时间成年月日时分秒
        function formatDate(dateString) {
            const date = new Date(dateString);
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            const hour = date.getHours();
            const minute = date.getMinutes();
            const second = date.getSeconds();
            return `${year}年${month}月${day}日  ${hour}时${minute}分${second}秒`;
        }

        // AJAX
        function postData(url, data, successCallback, errorCallback, type) {
            $.ajax({
                url: url,
                method: 'POST',
                dataType: 'json',
                contentType: 'application/json',  // 设置Content-Type
                data: JSON.stringify(data),       // 转换为JSON字符串
                success: function (response) {
                    if (successCallback && typeof successCallback === 'function') {
                        successCallback(response);
                    }
                },
                error: function (error) {
                    if (errorCallback && typeof errorCallback === 'function') {
                        errorCallback(error);
                    }
                }
            });
        }
    </script>
</body>

</html>